<template>
  <div class="class-room">
    <ul class="search-bar">
        <li>
            <el-button type="primary" @click="openDialog">选择教室</el-button>
        </li>
        <li>
            <ht-select
                    v-model="selectedXq"
                    :options="campusOptions"
                    placeholder="请选择校区"
                    multiple
                    filterable
            ></ht-select>
        </li>
        <li>
            <el-tooltip placement="top">
                <div slot="content">根据校区快速选择教室</div>
                <el-button type="primary" @click="selectXq">选择校区</el-button>
            </el-tooltip>
        </li>
    </ul>
    <ul class="search-bar">
      <li>
        <label>校区：</label>
        <ht-select
                v-model="search.xqid"
                :options="campusOptions"
                multiple
                filterable
        ></ht-select>
      </li>
      <li>
        <label>教室名称：</label>
        <ht-input v-model="search.jsmc" placeholder="请输入教室名称"></ht-input>
      </li>
      <li>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button
          type="danger"
          @click="batchDel"
          :disabled="!selectedList.length"
          >删除</el-button
        >
      </li>
    </ul>
    <el-table
      ref="htTable"
      :data="tableData"
      border
      height="450"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index" width="55"></el-table-column>
      <el-table-column label="教室名称" prop="jsmc" align="center">
      </el-table-column>
      <el-table-column
        prop="xqmc"
        label="校区名称"
        align="center"
      ></el-table-column>
      <el-table-column prop="zws" label="座位数" align="center">
      </el-table-column>
      <el-table-column
        prop="jslx"
        label="教室类型"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          {{ getNameByKey(scope.row.jslx) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="custom-pagination"
      background
      :current-page.sync="pageResult.page"
      :page-size="pageResult.pageSize"
      layout="prev, pager, next,sizes"
      :total="pageResult.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <select-class-room
      ref="selectClassRoom"
      :editId="editId"
      :classRoomOptions="classRoomOptions"
      @confirm="confirm"
    ></select-class-room>
  </div>
</template>

<script>
const selectClassRoom = () => import('./SelectClassRoom.vue')
import course from '@/api/course.js'
export default {
  name: 'classRoom',
  components: {
    selectClassRoom
  },
  props: {
    editId: String
  },
  data() {
    return {
      pageResult: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      search: {
        school: ''
      },
      tableData: [],
      selectedList: [],
      classRoomOptions: [],
      campusOptions:[],
      selectedXq:[],
    }
  },
  created() {
    this.getClassRoomOptions()
  },
  methods: {
    selectXq(){
        if(this.selectedXq && this.selectedXq.length>0){
            this.$confirm('确认通过校区批量添加教室，已有的教室会被清空?', '提示信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                course.bindAicDataByCampus(this.editId,this.selectedXq,"classroom").then(res => {
                    if (res.state) {
                        this.pageResult.page = 1
                        this.getTableData()
                        this.$message.success('添加成功！')
                        this.selectedXq = ""
                    } else {
                        this.$message.error(res.message || '接口异常！')
                    }
                })
            })


        }else{
            this.$message.error('请选择校区')
        }

    },
    getNameByKey(key) {
      if (!key) {
        return ''
      }
      if (!this.classRoomOptions) {
        return key
      }
      let obj = this.classRoomOptions.find(k => {
        return k.key == key
      })
      return obj ? obj.value : key
    },
    getClassRoomOptions() {
      course.getDicListByKeys('aicdic,xqdic').then(res => {
        this.getTableData()
        this.classRoomOptions = res.value.aicdic
        this.campusOptions = res.value.xqdic
      })
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    batchDel() {
      let ids = this.selectedList
        .map(k => {
          return k.jsid
        })
        .join(',')
      let params = {
        recordId: this.editId,
        paramType: 'classroom',
        ids
      }
      course.removeClassRoomList(params).then(res => {
        if (res.state) {
          this.pageResult.page = 1
          this.getTableData()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.message || '接口异常！')
        }
      })
    },
    handleSearch() {
      this.pageResult.page = 1
      this.getTableData()
    },
    confirm() {
      this.getTableData()
    },
    openDialog() {
      this.$refs.selectClassRoom.showDialog()
    },
    getTableData() {
      let params = {
        isRecord: true,
        pageBean: this.pageResult,
        querys: [],
        recordId: this.editId
      }
      if (this.search.xqmc) {
        params.querys.push({
          property: 'xqmc',
          value: this.search.xqmc,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (this.search.xqid) {
          params.querys.push({
              property: 'xqid',
              value: this.search.xqid,
              group: 'main',
              operation: 'IN',
              relation: 'AND'
          })
      }
      if (this.search.jsmc) {
        params.querys.push({
          property: 'jsmc',
          value: this.search.jsmc,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (this.search.jslx) {
        params.querys.push({
          property: 'jslx',
          value: this.search.jslx,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      course.getClassRoomList(params).then(res => {
        this.tableData = res.rows
        this.pageResult.total = res.total
      })
    },
    handleSizeChange(val) {
      //   每页条数
      this.pageResult.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      //   当前页
      this.pageResult.page = val
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.class-room {
  padding: 24px;
  .search-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      margin-bottom: 16px;
      margin-right: 16px;
      &.long-line{
        width: 100%;
      }
    }
  }
  .custom-pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
